<template>
  <div class="right-top-wrap">
    <div v-if="!selectAreaFlag" class="day-detail">
      <Row type="flex" justify="space-between" >
        <Col span="4" class="item" v-for="item of timeList" :key="item">
          <span style="color:#fff">{{item}}</span>
          <div class="flag" :class="bgColor(item)"></div>
        </Col>
      </Row>
    </div>
    <div v-else class="chart-box">
      <h-pie3d v-if="selectAreaFlag"  :id="id()" :chartData="yqglPieChartData" :defaultOptions="hPie3dOptions" />
    </div>
    <Modal
      v-model="useGasTableVisibile"
      class="candlestick-modal"
      :title="modalTitle"
      width="96%"
      :styles="{ top: '30px'}">
      <use-gas-table v-if="useGasTableVisibile" :options="downTableOptions" />
    </Modal>
  </div>
</template>
<script>
import { createNamespacedHelpers } from 'vuex'
import { includes, each, merge } from 'lodash'
import { nanoid } from 'nanoid'
import { hPie3dOptions } from './chartOptions'
import UseGasTable from '../UseGasTable'

const { mapState } = createNamespacedHelpers('meterReadingOptimize')

export default {
  name: 'meter-reading-optimize-right-top',
  components: {
    UseGasTable,
    HPie3d: () => import('@/commons/charts/HPie3d')
  },
  data() {
    return {
      modalTitle: '表格',
      useGasTableVisibile: false,
      downTableOptions: {}
    }
  },
  computed: {
    ...mapState(['yqglData', 'yqglPieData', 'selectAreaFlag']),
    id() {
      return nanoid
    },
    timeList() {
      const _li = []
      for (let i = 1; i <= 24; i++) {
        _li.push(i)
      }
      return _li
    },
    hPie3dOptions() {
      return hPie3dOptions
    },
    yqglPieChartData() {
      let _li = []
      try {
        const { list = [] } = this.yqglPieData
        _li = list
      } catch (error) {
        // do nothing
      }

      const _serList = []
      const _this = this
      each(_li, item => {
        const { name, value, ...rest } = item
        _serList.push({
          name: name,
          y: value,
          ...rest
        })
      })
      return merge({}, hPie3dOptions, {
        series: [
          {
            size: '75%',
            center: ['45%', '45%'],
            data: _serList,
            visible: _serList.length > 0,
            point: {
              events: {
                click: function () {
                  _this.handlePieClick(this)
                }
              }
            }
          }
        ]
      })
    }
  },
  methods: {
    bgColor(num) {
      const { definitelyGas, notGas } = this.yqglData
      const definitelyGasList = definitelyGas ? definitelyGas.split(',') : []
      const notGasList = notGas ? notGas.split(',') : []
      if (includes(definitelyGasList, num + '')) {
        return 'green'
      } else if (includes(notGasList, num + '')) {
        return 'red'
      } else {
        return 'black'
      }
    },
    handlePieClick(data) {
      const { name, meterIds } = data
      this.modalTitle = name
      this.downTableOptions.meterIds = meterIds
      this.$nextTick(() => {
        this.useGasTableVisibile = true
      })
    }
  }
}
</script>
<style lang="less" scoped>
.right-top-wrap {
  width: 100%;
  height: 100%;

  .day-detail {
    border-top: 1px  solid #ccc;
    border-left: 1px  solid #ccc;
    .item {
      padding: 5px;
      height: 50px;
      border-right: 1px  solid #ccc;
      border-bottom: 1px  solid #ccc;
    }

    .flag {
      margin: 0 auto;
      width: 15px;
      height: 15px;
      border-radius: 50%;
    }

    .green {
      background-color: #00da3c;
    }

    .red {
      background-color: #ec0000;
    }

    .black {
      background-color: #546570;
    }
  }

  .chart-box {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
}
</style>
